<template>
  <div>
    <div>
      <div class="market" >
        <p>近三月新增开户&交易人数</p>
      </div>
      <div class="showLegend">
        <p>
          <span>10月第2周</span><br/>
          <span>10.23</span>
        </p>
        <ul class="legend">
          <li><p></p>新增开户人数 <span>{{accountOpen}}</span></li>
          <li><p></p>交易人数 <span>{{trade}}</span></li>
          <li><p></p>上证指数 <span>{{shIndex}}</span></li>
        </ul>
      </div>
      <div ref="box"  style="height: 2.7rem;width:100%"></div>
      <div class="interval"></div><!--间隔-->
    </div>
    <div class="marketCapital" style="height: auto">
      <router-link to="/topSearch"><div>大家都在看 <p><span>{{peopleSee.moduleName}}{{peopleSee.moduleName ? '，' : ''}}{{peopleSee.strName}}{{peopleSee.strCode}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import { extend } from '@/common/common'
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'

const option = {
  title: {
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontFamily: 'PingFangSC',
      fontWeight: 'normal'
    },
    left: '3%'
  },
  tooltip: {
    trigger: 'axis',
    showContent: true,
    axisPointer: {
      type: 'cross',
      label: {
        show: false,
        backgroundColor: 'transparent',
        textStyle: {
          color: 'transparent'
        }
      }
    }
  },
  color: ['#b288ec', '#E97311', '#6C9BD2'],
//  toolbox: {
//    show: true
//  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['03.01', '03.02', '03.03', '03.04', '03.05', '03.06, 03.07', '03.08', '03.09', '03.10', '03.11', '03.12'],
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dotted',
          color: '#BAC9D8'
        }
      },       // 网格背景
      axisTick: {
        show: false
      },      // 隐藏刻度
      axisLine: {
        lineStyle: {
          type: 'dotted',
          color: '#3d3d3d'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#a5a5a5'
        }
      }    // x轴 文字样式
    }
  ],
  yAxis: [
    {
      //            boundaryGap: true,
      min: 70,
      max: 500,
      name: '人数(千人)',
      position: 'left',
      type: 'value',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dotted',
          color: '#BAC9D8'
        }
      },      // 网格 隐藏
      axisLabel: {
        textStyle: {
          color: '#a5a5a5'
        }
      },
      axisTick: {           // 隐藏刻度
        show: false
      },
      nameTextStyle: {
        color: '#555'
      },
      axisLine: {
        lineStyle: {
          type: 'dotted',
          color: '#BAC9D8'
        }
      }
    },
    {
      min: 2000,
      max: 4000,
      name: '上证指数',
      nameTextStyle: {
        color: '#555'
      },
      type: 'value',
      //            boundaryGap: true,
      splitLine: {
        lineStyle: {
          type: 'dotted',
          color: '#BAC9D8'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#a5a5a5'
        }
      },
      axisTick: {
        show: false
      },  // 隐藏刻度
      axisLine: {
        lineStyle: {
          type: 'dotted',
          color: '#BAC9D8'
        }
      }
    }
  ],
  grid: {
    top: '15%',
    bottom: '20%',
    left: '15%',
    right: '15%'
  },
  series: [
    {
      lineStyle: {
        normal: {
          color: '#E97311',
          width: 1
        }
      },    // 折线样式
      name: `交易人数`,
      type: 'line',
      symbol: 'none'
    },
    {
      lineStyle: {
        normal: {
          type: 'dotted',
          color: '#6C9BD2',
          width: 2
        }
      },
      name: `上证指数 ${3219} `,
      yAxisIndex: 1,
      type: 'line',
      smooth: true,
      symbol: 'none'
    },
    {
      lineStyle: {
        normal: {
          color: '#b288ec',
          width: 1
        }
      },    // 折线样式
      name: `新增开户人数`,
      type: 'line',
      symbol: 'none'
    }
  ]
};

export default {
  name: 'market',
  data () {
    return {
      obj: '',
      accountOpen: '',
      trade: '',
      shIndex: '',
      peopleSee: {}
    }
  },
  methods: {
    chartSelected(params) {
      let index = params[0].dataIndex;
      this.accountOpen = this.obj.lastTreeMonth.accountOpen[index];
      this.trade = this.obj.lastTreeMonth.trade[index];
      this.shIndex = this.obj.lastTreeMonth.shIndex[index];
    },
    async getMarketPopularity () {
      const vm = this;
      const myChart = echarts.init(this.$refs.box);
      const res = await remoteDAO.invoke(constant.InterfaceEnum.GET_M_POPULAR);
      vm.obj = res;
      console.log(res)
      let object = extend(option, {
        tooltip: {
          formatter: this.chartSelected
        },
        xAxis: [{
          data: res.lastThreeMonth.dateArray
        }],
        series: [{
          data: res.lastThreeMonth.trade
        }, {
          data: res.lastThreeMonth.shIndex
        }, {
          data: res.lastThreeMonth.accountOpen
        }]
      });
      vm.accountOpen = res.lastThreeMonth.accountOpen[0];
      vm.trade = res.lastThreeMonth.trade[0];
      // vm.shIndex = res.lastThreeMonth.shIndex[0];
      myChart.setOption(object)
    },
    getOverAllPeopleSee () {
      remoteDAO.invoke(constant.InterfaceEnum.GET_ALL_PEOPLE_SEE, null).then((result) => {
        this.peopleSee = result
      })
    }
  },
  mounted () {
    this.getMarketPopularity();
    this.$loop.register(this.getOverAllPeopleSee);
  },
  activated () {
    this.$loop.register(this.getOverAllPeopleSee);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .market{
    height:auto;
    p {
      font-size: 0.16rem;
      margin: 0 auto;
      width: 90%;
      height: 0.55rem;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      color: #222222;
      font-family: PingFangSC-Regular;
      font-weight: 600;
      border-bottom: 1px solid #dddddd;
    }
  }
  .showLegend{
    height:0.7rem;
    p{
      margin: 0 0 0 0.05rem;
      height:0.7rem;
      line-height: 0.35rem;
      float: left;
      width: 20%;
      font-size: 0.14rem;
    }
    .legend{
      width: 76%;
      height:0.7rem;
      float: right;
      margin: 0;
      padding: 0;
      li{
        width: 50%;
        height:0.35rem;
        line-height: 0.35rem;
        float: left;
        font-size: 0.12rem;
        text-indent: 0.05rem;
        text-align: left;
        p{
          width: 0.12rem;
          height:0.12rem;
          background:#b288ec;
          margin-top: 0.1rem;
          border: none;
          float: left;
        }
        span{
          color:#b288ec;
        }
      }
      li:nth-child(2){
        p{
          background:#e97311;
        }
        span{
          color:#e97311;
        }
      }
      li:last-child{
        p{
          background:#6c9bd2;
        }
        span{
          color:#6c9bd2;
        }
      }
    }
  }

  .marketCapital{
    height:1.11rem;
    a{
      text-decoration: none;
      div{
        font-size: 0.16rem;
        margin: 0 auto;
        width:90%;
        height:0.55rem;
        color: #222222;
        font-family: PingFangSC-Regular;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p{
          height: 100%;
          display: inline-flex;
          align-items: center;
          img{
            height: 0.16rem;
          }
          span{
            font-size: 0.12rem;
            color:#787878;
            font-family: PingFangSC-Regular;
          }
        }
      }
    }
  }
</style>
